import React, { createContext } from 'react';
import './app.css'

// 跨组件传递
const { Provider, Consumer } = createContext()

// function SonF(props) {
//   console.log(props)
//   return (
//     <div>
//       <span>函数子组件</span>
//       <p>{props.msg}</p>
//       <p>{props.list}</p>
//       <p>不能直接展示对象{props.userInfo.name}</p>
//       <button onClick={props.getMes}>执行来自父组件的函数</button>

//       {/* 传递jsx 类似插槽 */}
//       {props.child}
//     </div>
//   )
// }

// 解构写法
function SonF({ msg, list, userInfo, child, getMes, getSonMes }) {
  return (
    <div>
      <span>函数子组件</span>
      <p>{msg}</p>
      <p>{list}</p>
      <p>不能直接展示对象{userInfo.name}</p>
      <button onClick={getMes}>执行来自父组件的函数</button>

      {/* 传递jsx 类似插槽 */}
      {child}

      {/* 子传父 */}
      <button onClick={() => getSonMes('来自子组件的数据')}>子传父</button>
    </div>
  )
}

function SonA({ sendAmsg }) {
  return (
    <div>this is son a {sendAmsg}</div>
  )
}

function SonB({ getBMsg }) {
  const msgB = "来自b组件的数据"
  return (
    <div>
      this is son b
      <button onClick={() => getBMsg(msgB)}>发数据</button>
    </div>
  )
}

function ComSon() {
  return (
    <div>
      this is ComA
      <ComGrandson></ComGrandson>
    </div>
  )
}

function ComGrandson() {
  return (
    <div>
      this is ComC
      <Consumer>
        {value => <p>来自爷爷组件的数据{value}</p>}
      </Consumer>
    </div>
  )
}


// this.props获取数据
// props数据只读 只能向下传递
class SonC extends React.Component {
  render() {
    return (
      <div>
        类子组件
        <p>{this.props.msg}</p>
      </div>
    )
  }
}

function ListItem({ price, deleteItem }) {
  return (
    price.map(v => {
      return (
        <div key={v.id}>
          <h3>商品名：{v.name}</h3>
          <p>价格：{v.price}</p>
          <p>优惠：{v.info}</p>
          <button onClick={() => deleteItem(v.id)}>删除</button>
        </div>
      )
    })
  )
}

class App extends React.Component {
  state = {
    message: "this is msg",
    list: [1, 2, 3],
    userInfo: {
      name: "abc",
      age: 18
    },
    sendAmsg: "",
    price: [
      { id: 1, name: "棒棒糖", price: 18.8, info: "开业大酬宾" },
      { id: 2, name: "大鸡腿", price: 34.2, info: "开业大酬宾" },
      { id: 3, name: "冰激凌", price: 14.5, info: "开业大酬宾" }
    ]
  }

  getMes = () => {
    console.log('来组父组件的函数')
  }

  getSonMes = (sonMsg) => {
    console.log(sonMsg)
  }

  getBMsg = (bmsg) => {
    console.log(bmsg)
    this.setState({
      sendAmsg: bmsg
    })
  }

  deleteItem = (id) => {
    this.setState({
      price: this.state.price.filter(v => {
        return v.id !== id
      })
    })
  }

  render() {
    return (
      <div className="App" >
        <SonF msg={this.state.message} list={this.state.list} userInfo={this.state.userInfo} getMes={this.getMes} child={<span>jsx span</span>} getSonMes={this.getSonMes}></SonF>
        <SonC msg={this.state.message}></SonC>

        {/* 兄弟组件通信 */}
        <SonA sendAmsg={this.state.sendAmsg}></SonA>
        <SonB getBMsg={this.getBMsg}></SonB>

        {/* 跨组件通信使用consumer和provider */}
        <Provider value={this.state.message}>
          <ComSon></ComSon>
        </Provider>

        <ListItem price={this.state.price} deleteItem={this.deleteItem}></ListItem>
      </div>
    )
  }
}

export default App;
